import React from 'react';
import {View, Text, StyleSheet, ActivityIndicator} from 'react-native';
import PropTypes from 'prop-types';
import Styles from '../styles';
import {getRealSize, Touchable} from '../utils';

export default class Button extends React.PureComponent {
  static propTypes = {
    label: PropTypes.string.isRequired,
    onPress: PropTypes.func.isRequired,
    loading: PropTypes.bool,
    type: PropTypes.string,
    size: PropTypes.string,
  };

  static defaultProps = {
    label: '按钮',
    onPress: () => {},
    loading: false,
    type: 'primary',
    size: 'middle',
    style: {},
  };

  onPress = () => {
    const {onPress, disabled} = this.props;
    if (disabled) {
      return;
    }
    onPress();
  };

  render() {
    const {
      label,
      disabled,
      loading,
      size,
      type,
      block,
      width,
      style,
    } = this.props;
    return (
      <Touchable
        onPress={this.onPress}
        style={{backgroundColor: 'rgba(255,255,255,1)'}}>
        <View
          style={[
            BaseStyle.container,
            size ? ContainerSizeStyle[size] : ContainerSizeStyle.middle,
            type ? ContainerTypeStyle[type] : ContainerTypeStyle.primary,
            disabled && ContainerTypeStyle.disabled,
            style,
          ]}>
          <Text
            style={[
              BaseStyle.label,
              size ? LabelSizeStyle[size] : LabelSizeStyle.middle,
              type ? LabelTypeStyle[type] : LabelTypeStyle.primary,
              disabled && Styles.Color.disabled,
              width && {width: getRealSize(width)},
            ]}>
            {label}
          </Text>
          {loading && <ActivityIndicator />}
        </View>
      </Touchable>
    );
  }
}

const BaseStyle = StyleSheet.create({
  container: {
    ...Styles.Color.background.primary,
    ...Styles.Layout.flex.center,
    // ...Styles.Layout.small.mh,
    ...Styles.Layout.small.ph,
  },
  label: {
    ...Styles.Layout.flex.center,
  },
});
const ContainerSizeStyle = StyleSheet.create({
  middle: {
    paddingVertical: getRealSize(14),
    // paddingHorizontal: getRealSize(12),
    // height: getRealSize(50),
    // lineHeight: getRealSize(24),
    borderRadius: getRealSize(4),
  },
  small: {
    paddingVertical: getRealSize(4),
    borderRadius: getRealSize(2),
  },
  large: {},
});
const ContainerTypeStyle = StyleSheet.create({
  primary: {
    ...Styles.Color.background.primary,
  },
  ghost: {
    ...Styles.Color.background.white,
    borderColor: Styles.Color.primary.color,
    ...Styles.line,
  },
  link: {},
  disabled: {
    backgroundColor: Styles.Color.background.disabled.backgroundColor,
    borderColor: Styles.Color.transparent,
  },
});
const LabelSizeStyle = StyleSheet.create({
  middle: {
    fontSize: getRealSize(14),
  },
  small: {
    fontSize: getRealSize(10),
  },
  large: {
    fontSize: getRealSize(18),
  },
});
const LabelTypeStyle = StyleSheet.create({
  primary: {
    ...Styles.Color.text.white,
  },
  ghost: {
    ...Styles.Color.primary,
  },
  link: {},
});

export const Type = {
  primary: 'primary',
  ghost: 'ghost',
  link: 'link',
};

export const Size = {
  middle: 'middle',
  small: 'small',
  large: 'large',
};
